<!-- 社区店铺 -->
<template>
  <div class="store">
    <myheader title="社区店铺" rightBtn="添加店铺信息" @updataInfo="submitRecruit"></myheader>
    <!-- 搜索栏 -->
    <div class="serarch">
      <van-search v-model="searchValue" show-action placeholder="请输入搜索关键词" @search="onSearch" />
    </div>

    <ul v-if="!empty" class="store_content">
      <li
        class="store_content_li"
        v-for="(item,index) in store"
        :key="index"
        @click="goDetail(item)"
      >
        <div>
          <van-swipe lazy-rende>
            <van-swipe-item
              v-for="(items,indexs)  in item.imgList "
              :key="indexs"
              @click.stop="bigImg(index,indexs)"
              fit="contain"
            >
              <img :src="items" class="swip_img" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <div>
          <p class="store_content_li_name">{{item.profile}}</p>
          <p class="store_content_li_type">
            <span>{{item.name}}</span>
          </p>
          <p>{{item.addres}}</p>
          <p class="store_content_li_Tel">联系方式:{{item.user.phone}}</p>
        </div>
      </li>
    </ul>

    <van-empty v-else image="error" description="暂无此内容！" />

    <el-pagination
      background
      style="margin-top:1rem;"
      layout="total, prev, pager, next"
      v-if="!empty"
      @current-change="handleCurrentChange"
      :currentPage="currentPage"
      :page-size="pageSize"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import myheader from '../../../comon/myheader.vue'
import { ImagePreview } from 'vant'
export default {
  components: {
    myheader,
  },

  data() {
    return {
      store: [],
      currentPage: 1,
      pageSize: 6,
      pageCount: 2,
      total: 1,
      empty: false,
      searchValue: '',
    }
  },

  created() {
    this.init()
  },
  methods: {
    //日期格式化
    formatDateTime(val) {
      return formatDateTime.formatDateTime5(val)
    },
    async init() {
      const res = await this.$axios.get(
        '/shop/list?current=' + this.currentPage + '&size=' + this.pageSize
      )
      if (res.data.code == 200) {
        this.store = res.data.data.records
        this.total = res.data.data.total
        this.pageCount = res.data.data.pages
        this.currentPage = res.data.data.current
        this.empty = false
      }
    },
    // 搜索
    async onSearch() {
      const res = await this.$axios.get('/shop/list?name=' + this.searchValue)
      if (res.data.code == 200) {
        this.store = res.data.data.records
        this.total = res.data.data.total
        this.pageCount = res.data.data.pages
        this.searchValue = ''
        if (res.data.data.total == 0) {
          this.empty = true
        } else {
          this.empty = false
        }
      }
    },

    goDetail(item) {
      this.$router.push('/storesDetail/' + item.id + '/' + item.name)
    },

    handleCurrentChange(currentPage) {
      this.currentPage = currentPage

      this.init()
    },
    // 大图
    bigImg(index, indexs) {
      ImagePreview({
        images: this.store[index].imgList, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
      console.log(indexs)
    },
  },
}
</script>

<style scoped>
.store {
  margin-top: 46px;
}
.store_search {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 10px;
  border-top: 1px #39a9ed solid;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding-top: 5px;
  padding-left: 5%;
  padding-right: 5%;
  background: #ffffff;
  z-index: 888;
}
.store_search_input input {
  border: none;
}
.store_content {
  background: #ffffff;
}

/* 店铺内容 */
.store_content {
  padding-left: 10px;
  padding-right: 10px;
}
.store_content_li {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  margin-bottom: 10px;
}
.store_content_li > div:first-child {
  height: 100px;
  width: 120px;
  overflow: hidden;
}
.store_content_li > div:first-child > img {
  height: 100%;
  width: 100%;
}
.store_content_li > div:nth-child(2) {
  flex: 1;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  /* justify-content: left; */
  align-items: center;
  justify-content: space-between;
}
.store_content_li > div:nth-child(2) > p {
  width: 100%;
}
.store_content_li_name {
  font-weight: bold;
}
.store_content_li_type > span {
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  font-size: 12px;
  color: red;
}
.store_content_li_Tel {
  color: green;
}
</style>
